<form class="example-form" [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<div class="row">
    <div class="col">
        <mat-card class="example-card" style="width:400px;">
            <img mat-card-image class="mx-auto d-block rounded-circle" [src]="doctorProfile.ImageURL" alt="Photo of a Shiba Inu">
            <mat-card-content>
              <h3>Your ID:{{doctorProfile.UserId}}</h3>
            </mat-card-content>
            <mat-list dense>Qualifications
                <mat-list-item *ngFor="let qualifi of doctorProfile.Qualifications">
                    {{qualifi}}
                </mat-list-item>
            </mat-list>
          </mat-card>
    </div>
    <div class="col">
            <mat-form-field appearance="outline" class="example-half-width">
              <mat-label>FirstName</mat-label>
              <input matInput placeholder="FirstName" formControlName="FirstName">
              <mat-icon matSuffix>person</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
            </mat-form-field>
            <mat-form-field appearance="outline" class="example-half-width">
              <mat-label>LastName</mat-label>
              <input matInput placeholder="LastName" formControlName="LastName">
              <mat-icon matSuffix>person</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
            </mat-form-field>      
            <mat-form-field appearance="outline" class="example-half-width">
              <mat-label>PhoneNumber</mat-label>
              <input matInput placeholder="PhoneNumber" formControlName="Phone">
              <mat-icon matSuffix>phone</mat-icon>
              <!--<mat-hint>FirstName</mat-hint>-->
            </mat-form-field>
            <mat-form-field appearance="outline" class="example-half-width">
                <mat-label>Date of birth</mat-label>
                <input matInput placeholder="DOB" formControlName="Dob">
                <mat-icon matSuffix>today</mat-icon>
                <!--<mat-hint>FirstName</mat-hint>-->
            </mat-form-field>
            <mat-form-field appearance="outline" class="example-full-width">
                <mat-label>Email Address</mat-label>
                <input matInput placeholder="Email Address" formControlName="EmailAddress">
                <mat-icon matSuffix>email</mat-icon>
                <!--<mat-hint>FirstName</mat-hint>-->
            </mat-form-field>
            <mat-form-field>
                <mat-select placeholder="Qualifications" formControlName="Qualifications"  multiple>
                    <!--<mat-select-trigger>
                    {{Qualifications.value ? Qualifications.value[0] : ''}}
                    <span *ngIf="Qualifications.value?.length > 1" class="example-additional-selection">
                    (+{{Qualifications.value.length - 1}} {{Qualifications.value?.length === 2 ? 'other' : 'others'}})
                    </span>
                </mat-select-trigger>-->
                <mat-option *ngFor="let qualification of qualificationsList" [value]="qualification">{{qualification}}</mat-option>
                </mat-select>
            </mat-form-field>
            
            <button id="save" mat-raised-button color="primary"><mat-icon>save</mat-icon> SAVE </button>
                    
    </div>
    <div class="col" formGroupName="address">
        <button id="save" mat-raised-button color="primary"><mat-icon>save</mat-icon> SAVE </button>
        <mat-divider></mat-divider>
        <h4 mat-subheader>Your Address:</h4>
        <mat-form-field appearance="outline" class="example-half-width">
            <mat-label>house/cabin number</mat-label>
            <input matInput placeholder="house/cabin number" formControlName="number">
            <mat-icon matSuffix>location_city</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
        </mat-form-field>
        <mat-form-field appearance="outline" class="example-half-width">
            <mat-label>Street</mat-label>
            <input matInput placeholder="Street" formControlName="street">
            <mat-icon matSuffix>location_city</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
        </mat-form-field>
        <mat-form-field appearance="outline" class="example-half-width">
            <mat-label>City</mat-label>
            <input matInput placeholder="City" formControlName="city">
            <mat-icon matSuffix>location_city</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
        </mat-form-field>
        <mat-form-field appearance="outline" class="example-half-width">
            <mat-label>Country</mat-label>
            <input matInput placeholder="Country" formControlName="country">
            <mat-icon matSuffix>location_city</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
        </mat-form-field>
        <mat-form-field appearance="outline" class="example-half-width">
            <mat-label>Pincode</mat-label>
            <input matInput placeholder="Pincode" formControlName="pincode">
            <mat-icon matSuffix>location_city</mat-icon>
            <!--<mat-hint>FirstName</mat-hint>-->
        </mat-form-field>
    </div>
</div>
</form>


  